<template>
  <div>
    <div class="taskCreate" v-if="showCreate">
      <van-form>
        <!-- <van-field
          v-model="show.beginTime_plan"
          label="开始时间"
          placeholder="请选择"
          input-align="right"
          :rules="[{ required: true, message: '请确定计划时间' }]"
          readonly
          @click="onclickBeginTimePlan"
        />-->
        <van-field
          v-model="show.beginTime_plan"
          label="开始时间"
          placeholder="请选择"
          input-align="right"
          readonly
          @click="onclickBeginTimePlan"
        />
        <van-field
          v-model="show.endTime_plan"
          label="结束时间"
          placeholder="请选择"
          input-align="right"
          readonly
          @click="onclickEndTimePlan"
        />
        <van-field v-model="taskInfo.workAreaComment" label="作业地点" type="textarea" />
        <van-field v-model="taskInfo.workContent" label="作业内容" type="textarea" />
        <van-field
          v-model="managerShow"
          label="负责人"
          input-align="right"
          readonly
          @click="onclickRole('manager')"
        >
          <template #button>
            <van-button
              v-if="!manager.length"
              size="small"
              type="primary"
              style="margin-right: 5px;"
              @click.stop="onChooseMyDevice('manager')"
            >本设备</van-button>
            <van-button
              v-if="!manager.length"
              size="small"
              type="info"
              style="margin-right: 5px;"
              @click.stop="onChooseMyUser('manager')"
            >本账户</van-button>
            <van-button v-if="!manager.length" size="small" plain type="warning">自定义</van-button>
          </template>
        </van-field>
        <van-field
          v-model="petrolmanShow"
          label="作业人员"
          input-align="right"
          readonly
          @click="onclickRole('petrolman')"
        >
          <template #button>
            <van-button
              v-if="!petrolman.length"
              size="small"
              type="primary"
              style="margin-right: 5px;"
              @click.stop="onChooseMyDevice('petrolman')"
            >本设备</van-button>
            <van-button
              v-if="!petrolman.length"
              size="small"
              type="info"
              style="margin-right: 5px;"
              @click.stop="onChooseMyUser('petrolman')"
            >本账户</van-button>
            <van-button v-if="!petrolman.length" size="small" plain type="warning">自定义</van-button>
          </template>
        </van-field>
        <van-field v-model="taskInfo.comment" type="textarea" autosize label="备注" />
        <van-popup v-model="showDateTimePicker" round position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="datetime"
            title="选择日期时间"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirmDTP"
            @cancel="onCancelDTP"
          />
        </van-popup>
        <div class="submit-area">
          <van-button round style="width:120px;" @click="onCancelTaskCreate">取消</van-button>
          <van-button round type="info" style="width:120px;" @click="onSubmitTaskCreate">创建</van-button>
        </div>
      </van-form>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { getFormatDate, getFormatHourMinute, getFormatDateTime } from '@/utils/datetime'
import { mapGetters, createNamespacedHelpers } from 'vuex'
import { getUserInfobyId, getDeviceInfobyId } from '../../api/userDeviceGroup'
import { convertUserInfoStruct, convertDeviceInfoStruct } from '../../utils/taskUtils'

const taskCreateStore = createNamespacedHelpers('taskCreate')
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      lineData: null,
      taskInfo: {
        beginTime_plan: 0,
        endTime_plan: 0,
        workAreaComment: '',
        workContent: '',
        comment: ''
      },
      show: {
        beginTime_plan: '',
        endTime_plan: '',
        workArea: '',
        fence: ''
      },
      showDateTimePicker: false,
      showWorkAreaPicker: false,
      curShow: '',
      minDate: new Date(2022, 1, 1),
      maxDate: new Date(2025, 12, 31),
      currentDate: new Date()
    }
  },
  computed: {
    ...mapGetters(['userId', 'deviceId']),
    ...taskCreateStore.mapGetters(['showCreate', 'manager', 'petrolman', 'managerShow', 'petrolmanShow'])
  },
  watch: {},
  created() {},
  mounted() {
    this.fillTaskCreateData()
  },
  methods: {
    ...taskCreateStore.mapMutations(['setShowCreate', 'setTaskCreateData']),
    async onChooseMyDevice(role) {
      const deviceMsg = await getDeviceInfobyId(this.deviceId)
      if (deviceMsg.code === 0) {
        const members = []
        members.push(convertDeviceInfoStruct(deviceMsg.data))
        this.setTaskCreateData({ key: role, value: members })
      }
    },
    async onChooseMyUser(role) {
      const userMsg = await getUserInfobyId(this.userId)
      if (userMsg.code === 0) {
        const members = []
        members.push(convertUserInfoStruct(userMsg.data))
        this.setTaskCreateData({ key: role, value: members })
      }
    },
    jumpToMemberSelect(role, chosenItems) {
      this.setShowCreate(false)
      this.$router.push({ path: '/memberSelectQT', query: { role, chosenItems } })
    },
    fillTaskCreateData() {
      this.taskInfo.type = 3
      // this.fillShowData(this.taskInfo)
    },
    fillShowData(taskInfo) {
      // workArea Show
      // this.show.workArea = this.generateWorkareaShow()
    },
    onclickBeginTimePlan() {
      this.showDateTimePicker = true
      this.curShow = 'beginTimePlanPicker'
    },
    onclickEndTimePlan() {
      this.showDateTimePicker = true
      this.curShow = 'endTimePlanPicker'
    },
    onclickRole(role) {
      this.jumpToMemberSelect(role, this[role])
    },
    onConfirmDTP(dateTime) {
      if (this.curShow === 'beginTimePlanPicker') {
        this.taskInfo.beginTime_plan = dateTime
        this.show.beginTime_plan = getFormatDate(dateTime) + ' ' + getFormatHourMinute(dateTime)
      } else if (this.curShow === 'endTimePlanPicker') {
        this.taskInfo.endTime_plan = dateTime
        this.show.endTime_plan = getFormatDate(dateTime) + ' ' + getFormatHourMinute(dateTime)
      }
      this.showDateTimePicker = false
    },
    onCancelDTP() {
      this.showDateTimePicker = false
    },
    async onSubmitTaskCreate() {
      const task = {
        type: 5,
        state: 3,
        creater: { userId: this.userId, deviceInfo: { type: 'HT', id: this.deviceId } },
        beginTime_plan: getFormatDateTime(this.taskInfo.beginTime_plan),
        endTime_plan: getFormatDateTime(this.taskInfo.endTime_plan),
        manager: [],
        petrolman: [],
        workArea: {
          type: 0,
          area: [],
          areaComment: this.taskInfo.workAreaComment
        },
        workContent: this.taskInfo.workContent,
        comment: this.taskInfo.comment
      }

      this.manager.forEach((item) => {
        task.manager.push({ type: item.type, id: item.id })
      })
      this.petrolman.forEach((item) => {
        task.petrolman.push({ type: item.type, id: item.id })
      })
      const { data } = await this.$http.post('/task/taskCreate', task)
      if (data.code === 0) {
        this.$toast('创建成功')
        this.$router.go(-1)
      } else {
        this.$toast(`创建失败${data.msg}`)
      }
    },
    onCancelTaskCreate() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.taskCreate {
  .workArea {
    .van-cell {
      font-size: 30px;
    }
    .van-form {
      .meter {
        /deep/.van-field__label {
          width: 90px;
        }
      }
      .kilo {
        /deep/.van-field__label {
          width: 192px;
        }
      }
    }
  }
  .submit-area {
    margin: 20px 100px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
